```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Nginx HTTPS 与 HTTP/2 配置指南</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            color: #333;
            line-height: 1.6;
        }
        .serif {
            font-family: 'Noto Serif SC', serif;
        }
        .hero-gradient {
            background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%);
        }
        .card-hover {
            transition: all 0.3s ease;
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .code-block {
            background-color: #2d2d2d;
            color: #f8f8f2;
            border-radius: 0.5rem;
            overflow-x: auto;
        }
        .step-number {
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background-color: #6e8efb;
            color: white;
            font-weight: bold;
            margin-right: 1rem;
            flex-shrink: 0;
        }
        .section-divider {
            position: relative;
            height: 1px;
            background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.1), transparent);
            margin: 4rem 0;
        }
        .section-divider::after {
            content: "";
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 50px;
            height: 50px;
            background-color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            color: #6e8efb;
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- Hero Section -->
    <section class="hero-gradient text-white py-20 px-4">
        <div class="max-w-5xl mx-auto">
            <div class="flex items-center mb-4">
                <span class="bg-white bg-opacity-20 rounded-full px-4 py-1 text-sm font-medium">技术指南</span>
            </div>
            <h1 class="serif text-4xl md:text-5xl font-bold mb-6 leading-tight">Nginx HTTPS 与 HTTP/2 <br>配置完全指南</h1>
            <p class="text-xl md:text-2xl opacity-90 mb-8 max-w-3xl">提升网站安全性与性能的最佳实践</p>
            <div class="flex flex-wrap gap-4">
                <div class="flex items-center bg-white bg-opacity-10 rounded-lg px-4 py-2">
                    <i class="fas fa-shield-alt mr-2"></i>
                    <span>增强安全性</span>
                </div>
                <div class="flex items-center bg-white bg-opacity-10 rounded-lg px-4 py-2">
                    <i class="fas fa-tachometer-alt mr-2"></i>
                    <span>提升性能</span>
                </div>
                <div class="flex items-center bg-white bg-opacity-10 rounded-lg px-4 py-2">
                    <i class="fas fa-check-circle mr-2"></i>
                    <span>最佳实践</span>
                </div>
            </div>
        </div>
    </section>

    <!-- Main Content -->
    <div class="max-w-5xl mx-auto px-4 py-12">
        <!-- Intro Section -->
        <section class="mb-16">
            <p class="text-lg leading-relaxed mb-6">
                在当今的Web环境中，HTTPS已成为网站安全的基本要求，而HTTP/2协议则能显著提升网站性能。本指南将详细介绍如何在Nginx服务器上配置HTTPS并启用HTTP/2支持，确保您的网站既安全又高效。
            </p>
            <div class="bg-blue-50 border-l-4 border-blue-500 p-4 rounded">
                <div class="flex">
                    <div class="flex-shrink-0">
                        <i class="fas fa-info-circle text-blue-500 mt-1"></i>
                    </div>
                    <div class="ml-3">
                        <p class="text-sm text-blue-700">
                            <strong>专业建议：</strong> 对于生产环境，我们强烈建议使用Let's Encrypt等受信任CA颁发的证书，而不是自签名证书。
                        </p>
                    </div>
                </div>
            </div>
        </section>

        <!-- Process Visualization -->
        <section class="mb-16">
            <h2 class="serif text-3xl font-bold mb-8 text-center">配置流程概览</h2>
            <div class="mermaid">
                graph TD
                    A[获取SSL/TLS证书] --> B[配置Nginx支持HTTPS]
                    B --> C[启用HTTP/2协议]
                    C --> D[优化配置与安全强化]
                    A -->|自签名| A1[开发/测试环境]
                    A -->|CA颁发| A2[生产环境]
                    D --> D1[OCSP Stapling]
                    D --> D2[加密套件优化]
                    D --> D3[HSTS头部]
            </div>
        </section>

        <!-- Step 1 -->
        <section class="mb-16">
            <div class="flex items-start mb-8">
                <div class="step-number">1</div>
                <div>
                    <h2 class="serif text-3xl font-bold">获取 SSL/TLS 证书</h2>
                    <p class="text-gray-600">选择适合您环境的证书类型</p>
                </div>
            </div>
            
            <div class="grid md:grid-cols-2 gap-6">
                <div class="bg-white p-6 rounded-xl shadow-sm card-hover">
                    <div class="flex items-center mb-4">
                        <div class="bg-blue-100 p-2 rounded-lg mr-4">
                            <i class="fas fa-user-secret text-blue-500 text-xl"></i>
                        </div>
                        <h3 class="font-bold text-xl">自签名证书</h3>
                    </div>
                    <p class="text-gray-700 mb-4">适用于开发和测试环境，可以通过OpenSSL工具生成。</p>
                    <div class="code-block p-4 rounded-lg mb-4">
                        <pre class="text-sm whitespace-pre-wrap">openssl req -x509 -nodes -days 365 -newkey rsa:2048 \
-keyout /etc/nginx/ssl/nginx-selfsigned.key \
-out /etc/nginx/ssl/nginx-selfsigned.crt</pre>
                    </div>
                    <div class="flex items-center text-sm text-gray-500">
                        <i class="fas fa-exclamation-triangle mr-2 text-yellow-500"></i>
                        <span>浏览器会显示安全警告，不适用于生产环境</span>
                    </div>
                </div>
                
                <div class="bg-white p-6 rounded-xl shadow-sm card-hover">
                    <div class="flex items-center mb-4">
                        <div class="bg-green-100 p-2 rounded-lg mr-4">
                            <i class="fas fa-lock text-green-500 text-xl"></i>
                        </div>
                        <h3 class="font-bold text-xl">正式证书</h3>
                    </div>
                    <p class="text-gray-700 mb-4">生产环境应使用受信任CA颁发的证书，如：</p>
                    <ul class="space-y-2 mb-4">
                        <li class="flex items-center">
                            <i class="fas fa-check-circle text-green-500 mr-2"></i>
                            <span>Let's Encrypt (免费)</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fas fa-check-circle text-green-500 mr-2"></i>
                            <span>DigiCert</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fas fa-check-circle text-green-500 mr-2"></i>
                            <span>Comodo</span>
                        </li>
                    </ul>
                    <div class="bg-blue-50 px-4 py-2 rounded-lg text-sm">
                        <span class="font-medium">推荐：</span> 使用Certbot工具自动化获取和更新Let's Encrypt证书
                    </div>
                </div>
            </div>
        </section>

        <div class="section-divider"></div>

        <!-- Step 2 -->
        <section class="mb-16">
            <div class="flex items-start mb-8">
                <div class="step-number">2</div>
                <div>
                    <h2 class="serif text-3xl font-bold">配置 Nginx 支持 HTTPS</h2>
                    <p class="text-gray-600">设置SSL证书并启用安全连接</p>
                </div>
            </div>
            
            <div class="bg-white rounded-xl shadow-sm overflow-hidden mb-8 card-hover">
                <div class="bg-gray-800 text-white px-4 py-2 flex items-center">
                    <div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div>
                    <div class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div>
                    <div class="w-3 h-3 rounded-full bg-green-500 mr-2"></div>
                    <span class="text-sm ml-2">nginx.conf</span>
                </div>
                <div class="code-block p-4">
                    <pre class="text-sm"><code>server {
    listen 443 ssl;
    server_name example.com;

    # SSL 证书和私钥路径
    ssl_certificate /etc/nginx/ssl/example.com.crt;
    ssl_certificate_key /etc/nginx/ssl/example.com.key;

    # SSL 配置
    ssl_protocols TLSv1.2 TLSv1.3;  # 支持的 TLS 版本
    ssl_ciphers 'ECDHE-RSA-AES256-GCM-SHA384:ECDHE-RSA-AES128-GCM-SHA256';
    ssl_prefer_server_ciphers on;

    # 站点根目录
    root /var/www/html;
    index index.html index.htm;

    location / {
        try_files $uri $uri/ =404;
    }

    # 可选的 HSTS 头部（增加安全性）
    add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;
}</code></pre>
                </div>
            </div>
            
            <div class="grid md:grid-cols-2 gap-6">
                <div class="bg-blue-50 p-6 rounded-xl">
                    <h3 class="font-bold text-xl mb-3 flex items-center">
                        <i class="fas fa-terminal mr-2 text-blue-500"></i>
                        <span>重新加载配置</span>
                    </h3>
                    <p class="mb-4">修改配置后，需要重新加载Nginx使更改生效：</p>
                    <div class="code-block p-4 rounded-lg">
                        <pre class="text-sm">sudo nginx -t &amp;&amp; sudo nginx -s reload</pre>
                    </div>
                    <p class="text-sm text-gray-600 mt-2">先测试配置语法，再重新加载</p>
                </div>
                
                <div class="bg-purple-50 p-6 rounded-xl">
                    <h3 class="font-bold text-xl mb-3 flex items-center">
                        <i class="fas fa-redo mr-2 text-purple-500"></i>
                        <span>HTTP 重定向到 HTTPS</span>
                    </h3>
                    <p class="mb-4">建议将所有HTTP流量重定向到HTTPS：</p>
                    <div class="code-block p-4 rounded-lg">
                        <pre class="text-sm">server {
    listen 80;
    server_name example.com;
    return 301 https://$host$request_uri;
}</pre>
                    </div>
                </div>
            </div>
        </section>

        <div class="section-divider"></div>

        <!-- Step 3 -->
        <section class="mb-16">
            <div class="flex items-start mb-8">
                <div class="step-number">3</div>
                <div>
                    <h2 class="serif text-3xl font-bold">启用 HTTP/2</h2>
                    <p class="text-gray-600">提升网站性能的现代协议</p>
                </div>
            </div>
            
            <div class="bg-white rounded-xl shadow-sm overflow-hidden mb-8 card-hover">
                <div class="bg-gray-800 text-white px-4 py-2 flex items-center">
                    <div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div>
                    <div class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div>
                    <div class="w-3 h-3 rounded-full bg-green-500 mr-2"></div>
                    <span class="text-sm ml-2">nginx.conf</span>
                </div>
                <div class="code-block p-4">
                    <pre class="text-sm"><code>server {
    listen 443 ssl http2;  # 添加http2参数
    server_name example.com;

    ssl_certificate /etc/nginx/ssl/example.com.crt;
    ssl_certificate_key /etc/nginx/ssl/example.com.key;

    # 其余配置保持不变...
}</code></pre>
                </div>
            </div>
            
            <div class="grid md:grid-cols-2 gap-6">
                <div class="p-6 border border-gray-200 rounded-xl">
                    <h3 class="font-bold text-xl mb-3 flex items-center">
                        <i class="fas fa-bolt mr-2 text-yellow-500"></i>
                        <span>HTTP/2 优势</span>
                    </h3>
                    <ul class="space-y-3">
                        <li class="flex items-start">
                            <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
                            <span>多路复用：单个连接上并行处理多个请求</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
                            <span>头部压缩：减少HTTP头部开销</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
                            <span>服务器推送：服务器可以主动推送资源</span>
                        </li>
                    </ul>
                </div>
                
                <div class="p-6 border border-gray-200 rounded-xl">
                    <h3 class="font-bold text-xl mb-3 flex items-center">
                        <i class="fas fa-tachometer-alt mr-2 text-blue-500"></i>
                        <span>性能对比</span>
                    </h3>
                    <div class="h-40" id="perfChart"></div>
                    <p class="text-sm text-gray-600 mt-2">HTTP/2显著减少页面加载时间</p>
                </div>
            </div>
        </section>

        <div class="section-divider"></div>

        <!-- Step 4 -->
        <section class="mb-16">
            <div class="flex items-start mb-8">
                <div class="step-number">4</div>
                <div>
                    <h2 class="serif text-3xl font-bold">优化配置与安全强化</h2>
                    <p class="text-gray-600">进一步提升安全性和性能</p>
                </div>
            </div>
            
            <div class="grid md:grid-cols-3 gap-6 mb-8">
                <div class="bg-white p-6 rounded-xl shadow-sm card-hover">
                    <div class="bg-indigo-100 p-3 rounded-lg inline-block mb-4">
                        <i class="fas fa-shield-alt text-indigo-500 text-xl"></i>
                    </div>
                    <h3 class="font-bold text-xl mb-3">OCSP Stapling</h3>
                    <p class="text-gray-700 mb-4">通过缓存OCSP响应，减少客户端与CA的通信延迟</p>
                    <div class="code-block p-4 rounded-lg">
                        <pre class="text-sm">ssl_stapling on;
ssl_stapling_verify on;</pre>
                    </div>
                </div>
                
                <div class="bg-white p-6 rounded-xl shadow-sm card-hover">
                    <div class="bg-green-100 p-3 rounded-lg inline-block mb-4">
                        <i class="fas fa-lock text-green-500 text-xl"></i>
                    </div>
                    <h3 class="font-bold text-xl mb-3">加密套件优化</h3>
                    <p class="text-gray-700 mb-4">使用更安全的加密套件，禁用不安全的协议</p>
                    <div class="code-block p-4 rounded-lg">
                        <pre class="text-sm">ssl_protocols TLSv1.2 TLSv1.3;
ssl_ciphers 'ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384';</pre>
                    </div>
                </div>
                
                <div class="bg-white p-6 rounded-xl shadow-sm card-hover">
                    <div class="bg-red-100 p-3 rounded-lg inline-block mb-4">
                        <i class="fas fa-clock text-red-500 text-xl"></i>
                    </div>
                    <h3 class="font-bold text-xl mb-3">HSTS 头部</h3>
                    <p class="text-gray-700 mb-4">强制浏览器只通过HTTPS访问网站</p>
                    <div class="code-block p-4 rounded-lg">
                        <pre class="text-sm">add_header Strict-Transport-Security 
    "max-age=31536000; includeSubDomains" always;</pre>
                    </div>
                </div>
            </div>
            
            <div class="bg-yellow-50 border-l-4 border-yellow-400 p-4 rounded">
                <div class="flex">
                    <div class="flex-shrink-0">
                        <i class="fas fa-lightbulb text-yellow-500 mt-1"></i>
                    </div>
                    <div class="ml-3">
                        <h3 class="text-lg font-medium text-yellow-800">专业建议</h3>
                        <p class="text-sm text-yellow-700">
                            使用 <a href="https://mozilla.github.io/server-side-tls/ssl-config-generator/" class="underline font-medium">Mozilla SSL Configuration Generator</a> 
                            获取针对不同Nginx版本的安全配置建议，并定期检查证书有效期，设置自动续期。
                        </p>
                    </div>
                </div>
            </div>
        </section>

        <!-- Summary -->
        <section class="bg-blue-50 rounded-xl p-8 mb-16">
            <h2 class="serif text-3xl font-bold mb-6 text-center">配置要点总结</h2>
            <div class="grid md:grid-cols-2 gap-6">
                <div>
                    <h3 class="font-bold text-xl mb-4 flex items-center">
                        <i class="fas fa-check-circle text-blue-500 mr-2"></i>
                        <span>安全最佳实践</span>
                    </h3>
                    <ul class="space-y-3">
                        <li class="flex items-start">
                            <i class="fas fa-check text-blue-500 mt-1 mr-2"></i>
                            <span>使用受信任CA颁发的证书</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check text-blue-500 mt-1 mr-2"></i>
                            <span>禁用旧版TLS协议(TLS 1.0/1.1)</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check text-blue-500 mt-1 mr-2"></i>
                            <span>配置强加密套件</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check text-blue-500 mt-1 mr-2"></i>
                            <span>启用HSTS头部</span>
                        </li>
                    </ul>
                </div>
                <div>
                    <h3 class="font-bold text-xl mb-4 flex items-center">
                        <i class="fas fa-rocket text-purple-500 mr-2"></i>
                        <span>性能优化建议</span>
                    </h3>
                    <ul class="space-y-3">
                        <li class="flex items-start">
                            <i class="fas fa-check text-purple-500 mt-1 mr-2"></i>
                            <span>启用HTTP/2协议</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check text-purple-500 mt-1 mr-2"></i>
                            <span>配置OCSP Stapling</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check text-purple-500 mt-1 mr-2"></i>
                            <span>优化SSL会话缓存</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check text-purple-500 mt-1 mr-2"></i>
                            <span>启用TLS 1.3以获得最佳性能</span>
                        </li>
                    </ul>
                </div>
            </div>
        </section>
    </div>

    <!-- Footer -->
    <footer class="bg-gray-900 text-white py-12 px-4">
        <div class="max-w-5xl mx-auto">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="mb-6 md:mb-0">
                    <h3 class="text-xl font-bold mb-2">技术小馆</h3>
                    <p class="text-gray-400">专业的技术指南与最佳实践</p>
                </div>
                <div>
                    <a href="http://www.yuque.com/jtostring" class="text-blue-400 hover:text-blue-300 transition-colors">
                        <i class="fas fa-globe mr-2"></i>
                        http://www.yuque.com/jtostring
                    </a>
                </div>
            </div>
        </div>
    </footer>

    <script>
        // Initialize Mermaid
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: false,
                htmlLabels: true
            }
        });
        
        // Simple performance chart - in a real app you might use Chart.js or similar
        document.addEventListener('DOMContentLoaded', function() {
            const perfChart = document.getElementById('perfChart');
            if (perfChart) {
                perfChart.innerHTML = `
                    <div class="flex items-end h-full space-x-2">
                        <div class="flex-1 bg-blue-500 rounded-t" style="height: 60%">
                            <div class="text-center text-white text-xs pt-1">HTTP/1.1</div>
                        </div>
                        <div class="flex-1 bg-green-500 rounded-t" style="height: 30%">
                            <div class="text-center text-white text-xs pt-1">HTTP/2</div>
                        </div>
                    </div>
                `;
            }
        });
    </script>
</body>
</html>
```